﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Extjs.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    DemoPage
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" src="/Scripts/Extjs/Views/User/userform.js"></script>
    <script type="text/javascript" src="/Scripts/Extjs/Views/Activity/activityform.js"></script>
    <script type="text/javascript">
        Ext.require(['*']);
        var accordionPanel,detailsPanel,tabPanel,itemStore,itemPanel,itemId;
        Ext.onReady(function () {

            Ext.QuickTips.init();

            function perc(v) {
                return v + '%';
            }

            Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

            function renderStartTime(value, p, record) {
                var pDate = record.data.StartTime;
                return eval("new " + pDate.substr(1, pDate.length - 2)).toLocaleDateString();
            }

            function renderEndTime(value, p, record) {
                var pDate = record.data.EndTime;
                return eval("new " + pDate.substr(1, pDate.length - 2)).toLocaleDateString();
            }

            // example of custom renderer function
            function change(val) {
                if (val = 0) {
                    return '<span style="color:green;">' + val + '</span>';
                } else if (val > 0) {
                    return '<span style="color:red;">' + val + '</span>';
                }
                return val;
            }
            // example of custom renderer function
            function pctChange(val) {
                if (val = 0) {
                    return '<span style="color:green;">' + val + '%</span>';
                } else if (val > 0) {
                    return '<span style="color:red;">' + val + '%</span>';
                }
                return val;
            }

            // render rating as "A", "B" or "C" depending upon numeric value.
            function rating(v) {
                if (v == 0) return "A";
                if (v == 1) return "B";
                if (v == 2) return "C";
            }

            Ext.define('Activity', {
                extend: 'Ext.data.Model',
                fields: ['ID', 'No', 'Title', { name: 'StartTime' }, { name: 'EndTime' }, 'Content', 'View_Count', 'Ticket_Count', 'CurrentState']
            });

            Ext.define('Company', {
                extend: 'Ext.data.Model',
                fields: [
            { name: 'company' },
            { name: 'price', type: 'float' },
            { name: 'change', type: 'float' },
            { name: 'pctChange', type: 'float' },
            { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' },
            { name: 'industry' },
            { name: 'desc' }
         ]
            });

            Ext.define('Item', {
                extend: 'Ext.data.Model',
                fields: ['ID', 'PID', 'pName', 'pType', 'pYear', 'pAddress', 'pAwards', 'pDescription', 'No', 'Title', 'Content', 'Online_Count', 'Offline_Count', 'QuestionTitle']
            });

            var activityStore = Ext.create('Ext.data.Store', {
                model: 'Activity',
                groupField: 'CurrentState',
                proxy: { type: 'ajax', url: '/Activity/List' },
                pageSize: 8
            });

            activityStore.load();

            var pagingBar = Ext.createWidget('pagingtoolbar', {
                store: activityStore,
                displayInfo: true,
                displayMsg: '显示条目从第{0}条到第{1}条，共{2}条',
                emptyMsg: "没有记录"
            });

            var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
                groupHeaderTpl: '{name} (共{rows.length}项)'
            });

            var activityPanel = Ext.create('Ext.grid.Panel', {
                store: activityStore,
                frame: true,
                columns: [
            { header: "序号", width: 75, sortable: true, dataIndex: 'No' },
            { header: "标题", flex: 1, sortable: true, dataIndex: 'Title' },
            { header: "查看次数", sortable: true, dataIndex: 'View_Count' },
            { header: "已投票数", sortable: true, dataIndex: 'Ticket_Count' },
            { header: "开始时间", width: 200, sortable: true, renderer: renderStartTime, dataIndex: 'StartTime' },
            { header: "结束时间", width: 200, sortable: true, renderer: renderEndTime, dataIndex: 'EndTime' }
        ],
                loadMask: true,
                features: [groupingFeature],
                viewConfig: {
                    stripeRows: true
                },

                bbar: pagingBar,
                tbar: [
            { text: '新增活动',
                handler: showActivityCreateForm
            },
            '->',
            {
                xtype: 'triggerfield',
                trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
                trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger'
            }
        ],
                listeners: {
                    'itemdblclick': function (item) {
                        var selectionModel = activityPanel.getSelectionModel();
                        var record = selectionModel.getSelection();
                        var title = record[0].get('Title');
                        var id = record[0].get('ID');
                        tabPanel.add(Ext.create('Ext.Panel',
                        { id: 'tab_' + id,
                            title: title,
                            items: [Ext.create('Ext.form.Panel', {
                                id: 'company-form',
                                frame: true,
                                bodyPadding: 5,
                                layout: 'column',

                                fieldDefaults: {
                                    labelAlign: 'left',
                                    msgTarget: 'side'
                                },
                                tbar: [
                                //                                    { text: '保存',
                                //                                        handler: function () {
                                //                                            var row = itemPanel.getSelectionModel().getSelection();
                                //                                            var jsonData = "";
                                //                                            for (var i = 0, len = row.length; i < len; i++) {
                                //                                                var ss = row[i].get("ID");
                                //                                                if (i == 0)
                                //                                                    jsonData = jsonData + ss;        //这样处理是为了删除的Lambda语句方便
                                //                                                else
                                //                                                    jsonData = jsonData + "," + ss;   //这样处理是为了删除的Lambda语句方便
                                //                                            }
                                //                                            var conn = new Ext.data.Connection();
                                //                                            conn.request({
                                //                                                url: '/Activity/Save/', //请注意引用的路径
                                //                                                params: { id: id, Items: jsonData },
                                //                                                method: 'post',
                                //                                                scope: this,
                                //                                                callback: function (options, success, response) {
                                //                                                    if (success) {
                                //                                                        Ext.Msg.show({
                                //                                                            title: '操作结果',
                                //                                                            msg: '提交成功',
                                //                                                            buttons: Ext.Msg.OK
                                //                                                        });
                                //                                                    }
                                //                                                    else {
                                //                                                        Ext.Msg.show({
                                //                                                            title: '操作结果',
                                //                                                            msg: response.result.error,
                                //                                                            buttons: Ext.Msg.OK
                                //                                                        });
                                //                                                    }
                                //                                                }
                                //                                            })
                                //                                        } 
                                //                                    },
                                    {text: '提交',
                                    handler: function () {
                                        var row = itemPanel.getSelectionModel().getSelection();
                                        var jsonData = "";
                                        for (var i = 0, len = row.length; i < len; i++) {
                                            var ss = row[i].get("ID");
                                            if (i == 0)
                                                jsonData = jsonData + ss;        //这样处理是为了删除的Lambda语句方便
                                            else
                                                jsonData = jsonData + "," + ss;   //这样处理是为了删除的Lambda语句方便
                                        }
                                        var conn = new Ext.data.Connection();
                                        conn.request({
                                            url: '/Activity/Submit/', //请注意引用的路径
                                            params: { id: id, Items: jsonData },
                                            method: 'post',
                                            scope: this,
                                            callback: function (options, success, response) {
                                                if (success) {
                                                    Ext.Msg.show({
                                                        title: '操作结果',
                                                        msg: '提交成功',
                                                        buttons: Ext.Msg.OK,
                                                        icon: Ext.Msg.INFO
                                                    });
                                                    //attachgrid.store.reload();
                                                }
                                                else {
                                                    Ext.Msg.show({
                                                        title: '操作结果',
                                                        msg: response.result.error,
                                                        buttons: Ext.Msg.OK,
                                                        icon: Ext.Msg.ERROR
                                                    });
                                                }
                                            }
                                        })
                                    }
                                }
                                ],
                                items: [itemPanel = Ext.create('Ext.grid.Panel', {
                                    columnWidth: 0.7,
                                    xtype: 'gridpanel',
                                    store: itemStore = Ext.create('Ext.data.Store', {
                                        model: 'Item',
                                        groupField: 'QuestionTitle',
                                        proxy: { type: 'ajax', url: '/Activity/Details/' + id }
                                    }),
                                    features: [groupingFeature],
                                    selModel: Ext.create('Ext.selection.CheckboxModel'),
                                    columns: [
                                    {
                                        id: 'no',
                                        text: '编号',
                                        width: 75,
                                        sortable: true,
                                        dataIndex: 'No'
                                    },
                                    {
                                        text: '项目名',
                                        flex: 1,
                                        sortable: true,
                                        dataIndex: 'Title'
                                    },
                                    {
                                        text: '项目类别',
                                        width: 85,
                                        sortable: true,
                                        dataIndex: 'pType'
                                    },
                                    {
                                        text: '项目年份',
                                        width: 75,
                                        sortable: true,
                                        dataIndex: 'pYear'
                                    },
                                    {
                                        text: '在线票数',
                                        width: 75,
                                        sortable: true,
                                        renderer: change,
                                        dataIndex: 'Online_Count'
                                    },
                                    {
                                        text: '离线票数',
                                        width: 75,
                                        sortable: true,
                                        renderer: change,
                                        dataIndex: 'Offline_Count'
                                    }
                                ],

                                    listeners: {
                                        selectionchange: function (model, records) {
                                            if (records[0]) {
                                                this.up('form').getForm().loadRecord(records[0]);
                                                itemId = records[0].get('ID');
                                            }
                                        }
                                    }
                                }), {
                                    columnWidth: 0.3,
                                    margin: '0 0 0 10',
                                    xtype: 'fieldset',
                                    title: '项目情况',
                                    defaults: {
                                        width: 280,
                                        labelWidth: 90,
                                        hideLabel: true
                                    },
                                    defaultType: 'textfield',
                                    items: [{
                                        fieldLabel: '项目名称',
                                        name: 'pName'
                                    }, {
                                        fieldLabel: '项目年份',
                                        name: 'pYear'
                                    }, {
                                        fieldLabel: '项目类型',
                                        name: 'pType'
                                    }, {
                                        fieldLabel: '项目地址',
                                        name: 'PAddress'
                                    }, {
                                        fieldLabel: '获奖情况',
                                        name: 'pAward'
                                    }, {
                                        fieldLabel: '项目描述',
                                        name: 'pDescription',
                                        height: 200
                                    }, Ext.create('Ext.Img', {
                                        src: '/Activity/Thumbnail/' + itemId,
                                        listeners: {
                                            click: {
                                                element: 'el', //bind to the underlying el property on the panel
                                                fn: function () {
                                                    Ext.create('Ext.window.Window', {
                                                        title: 'Hello',
                                                        height: 600,
                                                        width: 800,
                                                        layout: 'fit',
                                                        items: [Ext.create('Ext.Img', {
                                                            src: 'http://www.sencha.com/img/20110215-feat-html5.png'
                                                        })]
                                                    }).show();
                                                }
                                            }
                                        }
                                    })]
                                }]
                            })],
                            //html: '<iframe id="frm_'+id+'" src="/Home/Details/" frameborder="0"></iframe>',
                            autoScroll: true,
                            closable: true,
                            tabtip: title
                        })
                    );
                        itemStore.load();
                        //Ext.Msg.alert(title, '没有编号为' + id + '的活动信息！');
                    },
                    selectionchange: function (model, records) {
                        if (records[0]) {
                            var title = records[0].get('Title');
                            var content = records[0].get('Content');
                            detailsPanel.setTitle(title);
                            detailsPanel.loadRecord(records[0]);
                        }
                    }
                }
            });

            accordionPanel = new Ext.Panel({
                id: 'accordion-panel',
                title: '功能导航',
                region: 'north',
                layout: 'accordion',
                split: true,
                height: 360,
                minSize: 150,
                autoScroll: true,
                tbar: [{ text: '注册',
                    handler: showRegisterForm
                }, { text: '登录', handler: showLoginForm }, { text: '忘记密码', handler: showPassForgetForm }, { text: '修改密码', handler: showPassModifyForm}],
                items: [{
                    title: '公告栏',
                    html: 'Some content'
                }]
            });

            // This is the Details panel that contains the description for each example layout.


            detailsPanel = new Ext.form.Panel({
                id: 'details-panel',
                title: '活动详细',
                region: 'center',
                bodyStyle: 'padding-bottom:15px;',
                autoScroll: true,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                border: false,
                bodyPadding: 10,

                fieldDefaults: {
                    labelAlign: 'top',
                    labelWidth: 70,
                    labelStyle: 'font-weight:bold'
                },
                defaults: {
                    xtype: 'textfield',
                    margins: '0 0 10 0'
                },

                items: [
                    { fieldLabel: '活动编号', name: 'No' },
                    { fieldLabel: '活动描述', name: 'Content' },
                    { fieldLabel: '查看次数', name: 'View_Count'}]
            });


            var viewport = Ext.create('Ext.Viewport', {
                id: 'border-example',
                layout: 'border',
                items: [
                // create instance immediately
            Ext.create('Ext.Component', {
                region: 'north',
                height: 32, // give north and south regions a height
                autoEl: {
                    tag: 'div',
                    html: '<h1>网络投票系统管理平台</h1>'
                }
            }), {
                region: 'west',
                stateId: 'navigation-panel',
                id: 'west-panel', // see Ext.getCmp() below

                split: true,
                width: 200,
                minWidth: 175,
                maxWidth: 400,
                animCollapse: true,
                margins: '0 0 0 5',
                layout: 'border',
                items: [accordionPanel, detailsPanel]
            },
                // in this instance the TabPanel is not wrapped by another panel
                // since no title is needed, this Panel is added directly
                // as a Container
            tabPanel = Ext.create('Ext.tab.Panel', {
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                activeTab: 0,     // first tab initially active
                items: [{
                    title: '活动列表',
                    autoScroll: true,
                    items: [activityPanel]
                    //                }, {
                    //                    title: '活动标题',
                    //                    closable: true,
                    //                    autoScroll: true,
                    //                    items: [itemPanel]
                }]
            })]
            });

        });
    </script>
</asp:Content>
